// ************************加载分类
let form = layui.form;
$.ajax({
  url: '/my/article/cates',
  success: function (res) {
    if (res.status == 0) {
      let str = `<option value="">请选择文章类别</option>`
      res.data.forEach(item => {
        str += `<option value="${item.Id}">${item.name}</option>`
      });
      $('select').html(str);
      form.render('select');
    }
  }
})

// ************************初始化富文本编辑器
// tinymce.init({
//   selector: '.layui-textarea',
//   language: 'zh_CN',
// });
initEditor() //自己封装的

// ****************************************图片插件初始化
$('#image').cropper({
  // 纵横比(宽高比)
  aspectRatio: 1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
});

$('.uplod-btn').click(function () {
  $('#file').click()
})

// 选择中图片input注册 change事件
$("#file").on("change", function () {

  // *********************************下面三步收集起来，防止未来使用
  // 1.获取图片对象；了解
  let obj = this.files[0];


  // 2.专门方法，把图片对象转化为临时URL地址: 了解
  let url = URL.createObjectURL(obj);


  // 3.替换到上面图片位置   查文档 了解
  // $(img) 被cropper插件修改；
  $('#image').cropper("replace", url);
});

// *************************发布
// 1.注册提交事件
$("form").on("submit", function (e) {
  e.preventDefault();

  // 2.收集数据：FormData;  
  let fd = new FormData(this);

  // 如何查看已经收到内容呢？发现插件初始化两个部分，没有收集!
  // fd.forEach(function(val, key) {
  //   console.log(val, key);
  // })


  // 3.手动收集  文本 、图片对象都是插件方法（了解，需要收集）
  // append()  添加一个信息
  // 重新设置：赋值
  fd.set("content", tinyMCE.activeEditor.getContent());
  // 图片
  let obj = $('#image').cropper('getCroppedCanvas', {
    width: 280,
    height: 280
  });
  // 得到图片对象
  obj.toBlob(function (blob) {
    fd.append("cover_img", blob);


    // 4.提交数据
    $.ajax({
      processData: false, //重要
      contentType: false, //重要
      url: "/my/article/add",
      type: "POST",
      data: fd,
      success: function (res) {
        if (res.status == 0) {
          layer.msg(res.message);


          // 产品设计：
          window.parent.document.querySelector("#list").click();
        }
      }
    })
  });

})



